<!-- From Uiverse.io by Shubh0408  - Tags: checkbox, menu, tailwindcss -->
<label class="flex flex-col gap-2 w-8">
  <input class="peer hidden" type="checkbox" />
  <div
    class="rounded-2xl h-[3px] w-1/2 bg-black duration-500 peer-checked:rotate-[225deg] origin-right peer-checked:-translate-x-[12px] peer-checked:-translate-y-[1px]"
  ></div>
  <div
    class="rounded-2xl h-[3px] w-full bg-black duration-500 peer-checked:-rotate-45"
  ></div>
  <div
    class="rounded-2xl h-[3px] w-1/2 bg-black duration-500 place-self-end peer-checked:rotate-[225deg] origin-left peer-checked:translate-x-[12px] peer-checked:translate-y-[1px]"
  ></div>
</label>


    